<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <script type="text/babel">
        // that缓存this 类外调用this
        // let that
        // class Weather extends React.Component{
        //     constructor(props){
        //         super(props)
        //         this.state = {
        //             isHot:false
        //         }
        //         that = this
        //     }
        //     render(){
        //         return <h1 onClick={changeWeather}> 今天天气很{this.state.isHot?'炎热':'凉爽'}</h1>
        //     }
        // }

        // function changeWeather(){
        //     console.log(that.state.isHot);
        // }
         class Weather extends React.Component{
            // 构造器调用次数 1次
            constructor(props){
                super(props)
                this.state = {
                    isHot:false
                }
                // 解决changeWeather方法中的this指向问题
                // 右侧this指向实例对象且右侧this.changeWeather指向Weather实例对象原型对象上的changeWeather方法，在赋值与左侧this.changeWeather1
                this.changeWeather1 = this.changeWeather.bind(this)
            }

            // render调用次数 1+n次 1是初始化，n为状态更新次数
            render(){
                const { isHot } = this.state
                return <h1 onClick={this.changeWeather1}> 今天天气很{isHot?'炎热':'凉爽'} </h1>
            }
            
            // changeWeather方法调用次数 1+n次 1是初始化，n为状态更新次数（点击几次调几次）
            changeWeather (){
                // 由于changeWeather是作为onClick 的回调，所以不是通过实例调用，而是直接调用
                // 类中的方法默认开启严格模式，所以this为undefined
                console.log(this);//输入undefined

                // 解决changeWeather方法中的this指向问题后
                const { isHot } = this.state
                //状态中的值不能直接更改 this.state.isHot = !isHot
                //需要借助内置api - setState 进行更新，且更新为合并不是覆盖
                this.setState({isHot:!isHot})
            }
        }
        ReactDOM.render(<Weather />,document.querySelector('#test'))
    </script>
</body>
</html>